<template>
  <div class="home">
    <el-container>
      <el-aside width="300px">
      <h2>对战管理平台</h2>
      <el-menu
        :default-active="selectedTab"
        class="el-menu-vertical-demo"
        @select = "handleSelect"
      >
        <el-menu-item v-for="item in tabs" :key="item.id" :index="item.id">
          <i :class="`el-icon-${item.icon}`"></i>
          <span><router-link :to="item.path">{{item.name}}</router-link></span>
        </el-menu-item>
      </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <Header :title="headerTitle" />
        </el-header>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Header from '../components/Header'

export default {
  name: 'Home',
  components: {
    Header
  },
  data () {
    return {
      tabs: [
        {
          name: '智能体类别管理',
          id: '1',
          path: '/home/category',
          icon: 'message'
        },
        {
          name: '环境管理',
          id: '2',
          path: '/home/env',
          icon: 'sunrise'
        },
        {
          name: '模型管理',
          id: '3',
          path: '/home/model',
          icon: 'monitor'
        },
        {
          name: '训练管理',
          id: '4',
          path: '/home/train',
          icon: 'user'
        },
        {
          name: '对战管理',
          id: '5',
          path: '/home/vs',
          icon: 'house'
        },
        {
          name: '回放管理',
          id: '6',
          path: '/home/replay',
          icon: 'video-camera'
        }
      ],
      selectedTab: '',
      headerTitle: '对战管理'
    }
  },
  methods: {
    handleSelect (e) {
      const select = this.tabs.find(item => item.id === e)
      this.selectedTab = select.id
      this.headerTitle = select.name
      this.$router.push({ path: select.path })
    }
  },
  created () {
    const select = this.tabs.find(item => item.path === this.$route.path)
    this.selectedTab = select.id
    this.headerTitle = select.name
  }
}
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  .el-menu {
    text-align: left;
    padding: 20px 0 0 30px;
    a {
      cursor: pointer;
      color: var(--el-menu-text-color);
      font-size: var(--el-menu-item-font-size);
    }
    a:visited {
      cursor: pointer;
      color: var(--el-menu-text-color);
      font-size: var(--el-menu-item-font-size);
    }
    .el-menu-item.is-active {
      border-right: 1px solid #409eff;
      a {
        color: var(--el-menu-active-color);
      }
    }
  }
}
.el-header {
  // background-color: #b3c0d1;
  color: var(--el-text-color-primary);
  text-align: center;
}

.el-aside {
  height: 100%;
  // background-color: #d3dce6;
  text-align: center;
}

.el-main {
  background-color: #e9eef3;
  color: var(--el-text-color-primary);
}

.el-container {
  height: 100%;
}
</style>
